import React from 'react';

import clsx from 'clsx';

import SvgIcon from '../SvgIcon';

interface SortTabsProps {
	value?: number | string;
	onChange?: (val: number | string) => void;
	data: { label: string; value: number }[];
}

const SortTabs: React.FC<SortTabsProps> = props => {
	const { data, value = 0 } = props;
	const [isActive, setIsActive] = useState<number | string>(value);
	const handleClick = (val: number) => {
		setIsActive(val);
		props?.onChange?.(val);
	};

	return (
		<div className="sort-item hw-full flex-1 flex items-center  pl-8 text-3.5 whitespace-nowrap">
			{data.map(item => (
				<div
					key={item.value}
					onClick={() => handleClick(item.value)}
					className={clsx(
						'mr-2 cursor-pointer bg-[#F1F5FB] flex items-center px-1 py-0.5 rounded-[2px]',
						{
							'color-primary': isActive === item.value,
							'color-#999': isActive !== item.value
						}
					)}
				>
					<SvgIcon localIcon="icon-sort" />
					<span>{item.label}</span>
				</div>
			))}
		</div>
	);
};

export default SortTabs;
